<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :label-position="labelPosition"
      label-width="115px"
      class="demo-ruleForm"
    >
      <el-form-item label="礼品名称" prop="goodsName">
        <el-input v-model="ruleForm.goodsName" placeholder="请输入礼品名称" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item label="支付方式" prop="goodsType">
        <el-select v-model="ruleForm.goodsType" placeholder="请选择支付方式" style="width:100%">
          <el-option label="金币" :value="1"></el-option>
          <el-option label="口粮" :value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="礼品单价" prop="goodsPrice">
        <el-input v-model.number="ruleForm.goodsPrice" placeholder="请输入礼品单价" maxlength="10"></el-input>
      </el-form-item>
      <el-form-item label="礼品价值" prop="goodsPresentValue">
        <div style="display:flex;">
          <el-input
            v-model.number="ruleForm.goodsPresentValue"
            placeholder="请输入礼品价值"
            maxlength="10"
          ></el-input>
          <span style="width:36px;margin-left:10px">宠币</span>
        </div>
        <div style="font-size: 14px;color: #DD5246;">*赠送礼物时，和礼物一并赠出的宠币*</div>
      </el-form-item>

      <!-- 上传礼品图片 -->
      <el-form-item label="礼品图片" prop="goodsImage">
        <el-upload
          ref="upload"
          :action="url+'/yuanjiu/upload/uploadImg'"
          list-type="picture-card"
          :limit="1"
          :class="{'updatePhotos':updatePhotos}"
          :on-change="updatechange"
          :on-remove="updateRemove"
          :on-success="updateSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <!-- 上传动态图 -->
      <el-form-item label="礼品GIF效果图" prop="goodsDynamicFigure">
        <el-upload
          ref="uploadImg"
          :action="url+'/yuanjiu/upload/uploadImg'"
          list-type="picture-card"
          :limit="1"
          :on-success="updateGifphotos"
          :on-remove="giftRemove"
          :on-change="giftchange"
          :class="{'gifphots':gifphots}"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="礼品简介" prop="goodsDesc">
        <el-input type="textarea" v-model="ruleForm.goodsDesc" maxlength="15"></el-input>
      </el-form-item>

      <el-form-item label="上架时间" prop="resource">
        <el-radio-group v-model="resource" @change="elradioTime">
          <el-radio :label="1">立即上架</el-radio>
          <el-radio :label="2">定时上架</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="上架时间" prop="goodsShelfTime" v-if="goodstime">
        <el-date-picker
          v-model="ruleForm.goodsShelfTime"
          type="datetime"
          placeholder="选择日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import base from "@/views/api/base.js";
export default {
  name: "child",
  props: {
    addstatus: Boolean
  },
  data() {
    return {
      // gift动态图
      gifphots: false,
      // 礼品图片
      updatePhotos: false,

      // 参数名称
      url: "", //图片上传地址
      dialogImageUrl: "", //查看礼品图片
      GifImageUrl: "", //查看礼品动态图片
      dialogVisible: false,
      labelPosition: "left",
      resource: 1, //选择上下架
      goodstime: false, //是否显示选择时间状态
      // fileList: [], //图片地址
      // fileListGift: [], //动态图片地址
      ruleFormobj: {}, //含有用户id对象数据
      // 编辑页面
      ruleForm: {
        adminId: 0, //登录人的用户Id
        goodsName: "", //礼品名字
        goodsType: "", //支付方式
        goodsPrice: "", //礼品单价
        goodsPresentValue: "", //礼品价值
        goodsImage: "", //礼品图片
        goodsDynamicFigure: "", //商品动态图片
        goodsDesc: "", //商品简介
        goodsShelfTime: "" //定时上下架时间
      },
      rules: {
        goodsName: [
          { required: true, message: "请输入礼品名称", trigger: "blur" }
        ],
        goodsType: [
          { required: true, message: "请选择支付方式", trigger: "change" }
        ],
        goodsPrice: [
          { required: true, message: "请输入礼品单价", trigger: "change" },
          { type: "number", message: "礼品单价必须为数字" }
        ],
        goodsPresentValue: [
          { required: true, message: "请输入礼品价值", trigger: "blur" },
          { type: "number", message: "礼品价值必须为数字" }
        ],
        goodsImage: [
          { required: true, message: "请上传礼品头像", trigger: "change" }
        ],
        goodsDynamicFigure: [
          { required: true, message: "请上传GIF图片", trigger: "change" }
        ],
        goodsDesc: [
          { required: true, message: "请输入礼品简介", trigger: "change" }
        ],

        goodsShelfTime: [
          { required: true, message: "请选择定时上下架时间", trigger: "change" }
        ]
      }
    };
  },
  // created(){
  //   console.log(this.goodsMsg)
  // },
  mounted() {
    // 重置表单
    // this.$refs[formName].resetFields();
    // 图片上传地址
    this.url = base.sq;
    // 获取本地存储
    let userMessage = JSON.parse(sessionStorage.getItem("userMessage"));
    this.ruleForm.adminId = userMessage.adminId;
    // 获取新增的状态
    this.addNewStatus(this.addstatus);
    // 获取事件
    console.log("childClick", this.childClick);
  },
  methods: {
    childClick(e) {
      if (e) {
        // 重置按钮中的数据
        this.$refs["ruleForm"].resetFields();
        this.$refs.uploadImg.clearFiles();
        this.$refs.upload.clearFiles();
        this.updatePhotos = false;
        this.gifphots = false;
      }
      console.log("我是子组件", e);
    },
    addNewStatus(val) {
      if (val == true) this.resetForm("ruleForm");
      console.log("获取新的状态", val);
    },

    // 查看图片放大
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // -----------------上传礼品图片------------------------------
    // 上传图片
    updateSuccess(response) {
      // this.$emit("goodsphoto", response.result);
      this.ruleForm.goodsImage = response.result;
      console.log("response", response.result);
    },
    // 图片上传change事件
    updatechange(file, fileList) {
      this.updatePhotos = fileList.length >= 1;
    },
    // 图片移出事件
    updateRemove(file, fileList) {
      console.log(file, fileList);
      this.updatePhotos = fileList.length >= 1;
    },
    // -----------------gift动态图展示------------------------------
    // 上传动态图
    updateGifphotos(response) {
      // this.$emit("goodsFigure", response.result);
      this.ruleForm.goodsDynamicFigure = response.result;
      console.log("上传动态图", response.result);
    },
    // 动态图change事件
    giftchange(file, fileList) {
      this.gifphots = fileList.length >= 1;
    },
    // 动态图移出事件
    giftRemove(file, fileList) {
      console.log(file, fileList);
      this.gifphots = fileList.length >= 1;
    },

    // 选择状态
    elradioTime(val) {
      if (val == 1) {
        this.goodstime = false;
      } else {
        this.goodstime = true;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleFormobj.goodsId) {
            this.$emit("addruleForm", this.ruleFormobj);
          } else {
            this.$emit("addruleForm", this.ruleForm);
          }
        } else {
          console.log(this.ruleForm);
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$emit('popup','close')
    }
  },
  // 监听props的值
  watch: {
    addstatus(val) {
      console.log("获取props值", val);
      if (val === true)   this.$refs['ruleForm'].resetFields();
      //   this.addNewStatus(val);
    },
    immediate: true
  }

  // watch: {
  //   // config: {
  //   ruleForms(newvalue) {
  //     console.log("获取新的数组", newvalue);
  //     if (newvalue.goodsId) {
  //       this.ruleFormobj = newvalue;
  //       this.ruleForm = newvalue;
  //       this.fileList = [];
  //       this.fileList.push({ url: newvalue.goodsImage }); //回显照片
  //       console.log("数组列表1", this.fileList);
  //       this.fileListGift = [];
  //       this.fileListGift.push({ url: newvalue.goodsDynamicFigure }); //回显照片
  //       console.log("数组列表2", this.fileListGift);
  //     } else {
  //       this.resetForm("ruleForm");
  //       this.fileList = [];
  //       this.fileListGift = [];
  //     }
  //     // this.test = newvalue.test;
  //     // if (newvalue.test === 1) {
  //     //   this.resetForm("ruleForm");
  //     //   this.fileList=[]
  //     // }
  //   },
  //   immediate: true
  //   // }
  // }
};
</script>

<style lang="scss" scoped>
.gifphots ::v-deep .el-upload--picture-card {
  display: none;
}
.updatePhotos ::v-deep .el-upload--picture-card {
  display: none;
}
.v-modal {
  z-index: 0 !important;
  display: flex;
  justify-content: space-between;
}
.el-upload-list__item-actions {
  transition: none !important;
}
.el-upload-list__item {
  transition: none !important;
}
.el-upload-list__item-actions {
  transition: none !important;
}
.el-upload-list__item-name {
  transition: none !important;
}
.el-upload-list--picture-card .el-upload-list__item-actions {
  transition: none !important;
}
</style>